<template>
    <div class="order">
        <div class="unLogin" v-if="unLogin">
            <div class="noDataImg"><img src="@/assets/img/icon/nodataimg.png" alt=""></div>
            <div class="descMsg">登录后查看订单</div>
            <div class="goLoginBtn">
                <van-button round color="#02b6fd" @click="$router.push('/login')">去登录</van-button>
            </div>
        </div>
        <van-pull-refresh v-model="loading" @refresh="onRefresh" v-if="unLogin == false">
            <van-tabs v-model:active="headerTabActiveName">
                <van-tab title="全部" name="all">
                    <template v-if="all.length">
                        <OrderItem :orderItem="item" v-for="(item,index) in all" :key="'all'+index"></OrderItem>
                    </template>
                    <template v-else>
                        <NoDataTip :msg="'暂无最近一年的订单'"></NoDataTip>
                    </template>
                </van-tab>
                <van-tab title="待消费" name="toPay">
                    <template v-if="toPaid.length">
                        <OrderItem :orderItem="item" v-for="(item,index) in toPaid" :key="'toPaid'+index"></OrderItem>
                    </template>
                    <template v-else>
                        <NoDataTip :msg="'暂无待消费的订单'"></NoDataTip>
                    </template>
                </van-tab>
                <van-tab title="待评价" name="toEvaluate">
                    <template v-if="toEvaluate.length">
                        <OrderItem :orderItem="item" v-for="(item,index) in toEvaluate" :key="'toEvaluate'+index"></OrderItem>
                    </template>
                    <template v-else>
                        <NoDataTip :msg="'暂无待评价的订单'"></NoDataTip>
                    </template>
                </van-tab>
                <van-tab title="退款" name="toRefund">
                    <template v-if="toRefund.length">
                        <OrderItem :orderItem="item" v-for="(item,index) in toRefund" :key="'toRefund'+index"></OrderItem>
                    </template>
                    <template v-else>
                        <NoDataTip :msg="'近三个月没有退款的订单'"></NoDataTip>
                    </template>
                </van-tab>
            </van-tabs>
            <div class="searchBtn"><img src="@/assets/img/icon/searchIcon.png" alt=""></div>
        </van-pull-refresh>
        <Footer></Footer>
    </div>
</template>

<script>
import OrderItem from './components/orderItem.vue'
import NoDataTip from './components/noDataTip.vue';
import Footer from '@/components/Footer.vue';
import { onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue';
import { getOneYearOrder, getToPaidOrder, getToEvaluateOrder, getToRefundOrder } from '@/api/order';
export default {
    name:"Order",
    setup(){
        // 头部tab导航栏 当前值
        const headerTabActiveName = ref('all');
        // 下拉加载
        const loading = ref(false);
        const onRefresh = () => {
            setTimeout(() => {
                loading.value = false;
            }, 1000);
        };

        // 是否登录
        const unLogin = ref(false);
        onBeforeMount(()=>{
            if(localStorage.getItem('userId') == null) unLogin.value = true;
            else unLogin.value = false;
        })

        const data = reactive({
            all:[],
            toPaid:[],
            toEvaluate:[],
            toRefund:[]
        })
        const { all, toPaid, toEvaluate, toRefund } = toRefs(data);
        // 全部-获取近一年的订单
        const getOneYearOrderReq = () => {
            getOneYearOrder({
                user_id:localStorage.getItem('userId')
            }).then(res=>{
                console.log(res)
                if(res.code == '81000') all.value = res.data;
            })
        }
        // 待消费-获取待消费订单
        const getToPaidOrderReq = () => {
            getToPaidOrder({
                user_id:localStorage.getItem('userId')
            }).then(res=>{
                console.log(res)
                if(res.code == '82000') toPaid.value = res.data;
            })
        }
        // 待评价-获取待评价订单
        const getToEvaluateOrderReq = () => {
            getToEvaluateOrder({
                user_id:localStorage.getItem('userId')
            }).then(res=>{
                console.log(res)
                if(res.code == '83000') toEvaluate.value = res.data;
            })
        }
        // 退款-获取退款订单
        const getToRefundOrderReq = () => {
            getToRefundOrder({
                user_id:localStorage.getItem('userId')
            }).then(res=>{
                console.log(res)
                if(res.code == '84000') toRefund.value = res.data;
            })
        }
        onMounted(()=>{
            // 全部-获取近一年的订单
            getOneYearOrderReq();
            // 待消费-获取待消费订单
            getToPaidOrderReq();
            // 待评价-获取待评价订单
            getToEvaluateOrderReq();
            // 退款-获取退款订单
            getToRefundOrderReq();
        })
        return{
            headerTabActiveName,
            loading,
            onRefresh,
            unLogin,
            all,
            toPaid,
            toEvaluate,
            toRefund
        }
    },
    components:{
        OrderItem,
        NoDataTip,
        Footer,
    }
}
</script>

<style>
.order{
    width: 100%;
    background: #f5f5f5;
    position: relative;
}
.order .unLogin{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.order .unLogin .noDataImg{
    width: 208px;
    height: 208px;
}
.order .unLogin .noDataImg img{width: 100%;height: 100%;}
.order .unLogin .descMsg{font-size: 16px;color: #333;}
.order .unLogin .goLoginBtn{margin: 15px 0 50px;}
.order .unLogin .goLoginBtn .van-button{height: 35px;}
.order .van-tabs{
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.order .van-tabs__wrap{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 55px;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    background: #f5f5f5;
}
.order .van-tabs__nav{
    width: 100%;
    background: #f5f5f5;
    height: 50px;
    padding-bottom: 0;
    position: relative;
    left: -16px;
}
.order .van-tab{
    flex: 0 0 auto; 
    font-size: 18px;
    color: #333;
    width: 22%;
    position: relative;
}
.order .van-tab--active{font-size: 20px;}
.order .van-tabs__line{bottom: 6px;width: 25px;height: 4px;background: rgb(2, 182, 253);}
.order .van-tabs__content{
    box-sizing: border-box;
    padding: 60px 15px 100px;
    width: 100%;
    min-height: 100vh;
    position: relative;
}
.order .searchBtn{
    width: 30px;
    height: 30px;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 100;
    line-height: 30px;
    text-align: center;
}
.order .searchBtn img{width: 90%;height: 90%;}
/* .order .noData{
    position: absolute;
    top: 0;bottom: 0;left: 0;right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.order .noData .noDataImg{
    width: 208px;
    height: 208px;
}
.order .noData .noDataImg img{width: 100%;height: 100%;}
.order .noData .descMsg{font-size: 16px;color: #333;margin-bottom: 50px;} */
</style>